<template>
  <!-- <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div> -->
  <div>
    <div class="head_pic" v-if="led_status===1">
    </div>
    <div class="head_pic_off" v-if="led_status===0">
    </div>
    <div class="switch"  v-if="led_status===1">
      <div>
        已开启
      </div>
      <div class="icon_sw"  @click="closeLed">

      </div>
    </div>
    <div class="switch_off"  v-if="led_status===0">
      <div>
        已关闭
      </div>
      <div class="icon_sw"  @click="openLed">

      </div>
    </div>
    <!-- <button @click="flag=1">123</button> -->
  </div>
</template>

<script>
// @ is an alias to /src
// import HelloWorld from '@/components/HelloWorld.vue'

export default {
  data(){
    return{
      led_status:0
    }
  },
  created(){
    this.getLedStatus()
  },
  methods:{
    async getLedStatus(){
      const { data:res } = await this.$http.get('api/getLedStatus')
      this.led_status = res.data.ledstatus
      console.log(res.data)
    },
    async openLed(){
      this.led_status = 1
      const { data:res } = await this.$http.get('api/openLed')
      console.log(res.data)
    },
    async closeLed(){
      this.led_status = 0
      const { data:res } = await this.$http.get('api/closeLed')
      console.log(res.data)
    }
  }
  // name: 'Home',
  // components: {
  //   HelloWorld
  // }
}
</script>

<style scoped>
  .head_pic_off{
    width: 100%;
    height: 5.853333rem;
    background: url(../assets/images/led_off.jpg);
    background-size: 10rem 5.853333rem;
  }
  .switch_off{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 9.733333rem;
    height: 2.173333rem;
    margin: .106667rem .133333rem;
    color: #f2f2f2;
    padding: 0 .266667rem;
    /* background: url(../assets/images/sw.jpg); */
    /* background-size: 9.733333rem; */
    background-color: #9caec6;
    border-radius: .266667rem;
    font-size: .666667rem;
  }
  
  .head_pic{
    width: 100%;
    height: 5.853333rem;
    background: url(../assets/images/led.jpg);
    background-size: 10rem 5.853333rem;
  }
  .switch{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 9.733333rem;
    height: 2.173333rem;
    margin: .106667rem .133333rem;
    color: #f2f2f2;
    padding: 0 .266667rem;
    /* background: url(../assets/images/sw.jpg); */
    /* background-size: 9.733333rem; */
    background-color: #10beef;
    border-radius: .266667rem;
    font-size: .666667rem;

  }
  .icon_sw{
    width: 1.333333rem;
    height: 1.333333rem;
    background: url(../assets/images/swi.png) no-repeat;
    background-size: 1.333333rem;
  }
  
</style>